/* 整体页面布局与背景 */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative; /* 为后续绝对定位元素提供相对定位上下文 */
}

.pager-container {
    margin-left: 220px; /* 根据侧边栏宽度等实际情况调整左边距，保持与页面其他内容布局协调 */
    margin-top: 20px;
    text-align: center;
}

.page-info {
    font-size: 14px;
    color: #6c757d; /* 设置文本颜色为较淡的灰色，使其不过于突出 */
    margin-bottom: 10px;
}

.pager-body {
    display: flex;
    justify-content: center; /* 确保分页链接在水平方向居中显示 */
}

.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 4px;
}

.page-item {
    margin: 0 3px; /* 调整页项之间的间距 */
}

.page-item.disabled {
    pointer-events: none; /* 禁用点击事件，当不可点击时（如没有上一页或下一页时）呈现灰色且无法点击 */
    opacity: 0.6; /* 降低透明度，显示为不可用状态 */
}

.page-link {
    display: block;
    padding: 6px 12px;
    color: #007BFF; /* 链接颜色，通常为主题色，方便用户识别可点击元素 */
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6; /* 边框颜色，与整体页面风格协调 */
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease; /* 添加过渡效果，增强交互感 */
}

.page-link:hover {
    background-color: #e9ecef; /* 鼠标悬停时背景色变化，提供交互反馈 */
    color: #0056b3; /* 鼠标悬停时链接颜色变化，与整体交互色一致 */
}

.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 获得焦点时添加淡淡的阴影，增强可访问性 */
    outline: none;
}

/* 上一页和下一页的箭头样式调整（可根据喜好选用不同的图标字体等方式，这里简单通过字符实体来示例） */
.page-link span[th*="&laquo;"] {
    margin-right: 5px;
}

.page-link span[th*="&raquo;"] {
    margin-left: 5px;
}

/* 标题样式 */
h1 {
    text-align: center;
    color: #343a40;
    margin-top: 30px;
    font-size: 2.2rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 导航栏样式 */
.navigation-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #e9ecef;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.nav-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.action-bar {
    display: flex;
    align-items: center;
}

/* 表单输入框样式 */
.form-control.search-input {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 8px 12px;
    margin-right: 10px;
    transition: border-color 0.3s ease;
    width: 300px; /* 设置宽度为300像素，你可以根据实际需求调整具体数值 */
    height: 20px; /* 设置高度为40像素，同样可按需修改 */
}

.form-control.search-input:focus {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* 按钮样式 */
button,
a.btn {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    margin-right: 10px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

button:hover,
a.btn:hover {
    background-color: #0056b3;
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

#addUserButton {
    position: absolute;
    top: 10px;
    right: 10px;
    text-decoration: none;
    color: white;
    background-color: #007BFF;
    padding: 8px 15px;
    border-radius: 3px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

#addUserButton:hover {
    background-color: #0056b3;
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* 表格容器样式 */
.table-container {
 /* 适当增加左边距的值，确保不与侧边栏重合，这里假设侧边栏宽度为220px左右，你可以根据实际情况调整 */
    margin-top: 30px;
    flex: 1;
    overflow-x: auto;
    padding: 0 20px;
}

/* 表格样式 */
table {
    margin-left: 250px;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

th,
td {
    border: 1px solid #e9ecef;
    padding: 12px 18px;
    text-align: left;
    transition: background-color 0.3s ease;
}

th {
    background-color: #f1f3f5;
    color: #343a40;
    font-weight: bold;
}

tr:hover {
    background-color: #f8f9fa;
}

/* 操作列链接样式 */
td a {
    color: #007BFF;
    text-decoration: none;
    margin-right: 10px;
    transition: color 0.3s ease;
}

td a:hover {
    color: #0056b3;
}
